﻿
<template>
  <div class="Adventure_core"> 
    <input type="file" class="=file" style="display:none" ref="file"  multiple="multiple" />
    <div class="Adventure_header">
      <input tyep="text" placeholder="输入标题" class="input_title" ref ="title_input"/>
    </div>
    <div class="Adventure_get_img"ref="img_wrapper">

      <!-- tips s -->
      <img src="../../static/img/adventure_img.jpg"
           alt="alternate text" class="adventure_get_img_tips"
           v-show="img_tips" v-on:click="get_img"/>
      <!-- tips e -->

      <!-- swiper s -->
      <mt-swipe :auto="4000" v-show="swipe_show" class="swipe">
        <mt-swipe-item class="slide1" v-for="(list,index) in img_list">
          <!-- 添加图片按钮 s-->
          <div class="add_img"  v-if="!list.w && !list.tips" v-on:click.self="get_img"> + </div>
          <!-- 添加图片按钮 e-->

          <!-- 删除图片按钮 s -->
          <div class="remove_img" v-if="!list.w && !list.tips" v-on:click.self="img_self_remove"> - </div>
          <!-- 删除图片按钮 e -->

          <img v-bind:src="list.img" style="width:70.6vw;" v-if="!list.w && !list.tips" v-on:click="show_max(list.img)"/>

          <div v-if="list.w" class="swiper_w" v-html="w_value">
            <!--{{w_value}}-->
          </div>
          <img src="../../static/img/adventure_img.jpg"
               alt="alternate text" class="adventure_get_img_tips"
               v-if="list.tips" v-on:click="get_img" />
        </mt-swipe-item>
      </mt-swipe>
      <!-- swiper e -->

    </div>
    <div class="Adventure_get_music">
      <img src="../../static/img/wen.png" class="wenpng" v-on:click="wenpng_click"/>
      <div class="Adventure_music_line" v-on:click="show_music">
        添加语音
      </div>
      <!--<div class="Adventure_music_btn"></div>-->
      <img src="../../static/img/music_player_icon.png" class="Adventure_music_btn" />
    </div>
    <div class="Adventure_bottom">
      <div class="Adventure_left">
        <div class="Adventure_bottom_header">
          <div class="Adventure_bottom_header_s">冒险试炼:</div>
          <div class="Adventure_bottom_header_btn" v-on:click="q_q">
            参考问题
          </div>
        </div>
        <textarea class="text_area" ref ="text_area">
            {{q_data}}
        </textarea>
      </div>
      <div class="certain_btn" v-on:click="ertain_btn">
        确认
      </div>
    </div>

    <!-- wenpng_click s -->
    <div class="wenpng_click_mask" v-show="false" v-on:click.self="wenpng_click_mask_h"  placeholder="请输入文字">
       <textarea ref ="wen_c">
         {{w_value}}
       </textarea>
       <div class="certain_w" v-on:click="certain_btn_w">
          确认
       </div>
    </div>
    <!-- wenpng_click e -->

    <!-- new w input s-->
    <div class="new_input_w" v-show="wenpng_click_d">
      <input type="text" name="name" value="" placeholder="标题" class="input_title" ref ="title"/>
      <textarea class="text_a_input" placeholder="输入文字"  ref ="wen_c">
          {{w_value}}
      </textarea>
      <img src="../../static/img/ad_input_succ.jpg" class="input_s_btn" v-on:click="certain_btn_w">
    </div>
    <!-- new w input e -->

    <!--bottom btn s-->
    <div class="bottom_btn">

    </div>
    <!-- bottom btn e-->
  </div>
</template>

<script>
  import '../../static/css/mint-ui/style.css'
  import MintUI from 'mint-ui'
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import { Toast, Indicator, MessageBox, Swipe, SwipeItem  } from 'mint-ui';
  import qs from 'qs';
  //import  "../../static/css/Adventure/Adventure.css"
  import Vue from "vue";
  import axios from 'axios'
  import filter from "../filter/filter.js"
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
  Vue.prototype.$http = axios
  Vue.use(MintUI);
  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);

  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        show_music_t: false,
        img_tips: true,
        img_list: [],
        img_src: "www",
        swipe_show:false,
        file_plus_flag: false,
        q_list: [],
        wenpng_click_d: false,
        w_value: "",
        swiper_tips_index: null,
        _has_img: false,
        _has_w:false,
        e_files:""
      }
    },
    props: ["music_show", "img_max_show", "show_q", "q_data","up_load_id"],
    beforeCreate: function () {

    },
    directives: {
      change: {
        // 指令的定义
        inserted: function (el) {

        }
      }
    },
    watch: {
      // 如果 `question` 发生改变，这个函数就会运行
      q_data: function (newQuestion) {
        this.$refs.text_area.value = this.q_data
      }
    },
    methods: {
      ertain_btn: function () {
        let id = location.search.split("user_id=")[1];
        let formData = new FormData();
        //if (this.up_load_id == null) {
        //    alert("请提交录音哦~~")
        //}
        alert("up_load_id")
        alert(this.up_load_id)
       let gid = sessionStorage.getItem("gid", gid);
       let cid = sessionStorage.getItem("cid", cid);
       let input_img = this.$refs.file.files[0];

       if (this.$refs.title_input.value == "" || this.$refs.title_input.value != null || this.$refs.title_input.value != undefined) {
         formData.append("title", this.$refs.title_input.value);
       }

       if (this.w_value == "" || this.w_value != null || this.w_value != undefined) {
         formData.append("content", this.w_value);
       }

       formData.append('user.id', id);
       if (input_img == null || input_img == "" || input_img == undefined) {
         alert(input_img)
         formData.append('my', input_img);
       }

       formData.append('myfiles',input_img);
        if (this.up_load_id != undefined || this.up_load_id != null) {
          formData.append("voice", this.up_load_id)
        }


        if (this.q_data != null || this.q_data != undefined) {
          formData.append("trialQuestion", this.q_data)
        }

        formData.append("cover.id", cid)
        formData.append("groupAndCover.id", gid)

        //添加冒险卡
        Indicator.open();
        this.$http.post('/yizhiweimen/api/user/personalHomepage/addAdventureCard',
          formData
          )
          .catch((thrown) => {
            Indicator.close()
            alert(thrown);
            Toast({
              message: '网络出错',
              position: 'bottom',
              duration: 2000
            });
          }).then((e) => {
            Indicator.close();
            alert(e.data);
            //记录id
            //this.qs_list = e.data
          })
      },
      img_self_remove: function (index) {
        let len = this.img_list.length;
        this.img_list.splice(index, 1);
        this.$refs.file.value = null//初始化 input 的 value 值
        if (this.img_list.length == 0) {//没有图 和 文字
          this.swipe_show = false
          this.img_tips = true;
        } else if (this.img_list.length == 1 && (!!this.img_list[0] ? true : false)) {//有一个 但是 是文字
          this.img_list.push({ tips: true, w: false });//swiper 添加 tips
          this.swiper_tips_index = 1
        }
      },
      wenpng_click_mask_h: function () {
        this.wenpng_click_d = false
      },
      wenpng_click: function () {
        this.wenpng_click_d = !this.wenpng_click_d;

      },
      q_q: function () {
        //显示问题参考
        this.$emit("show_q");
      },
      get_img: function () {
        this.$refs.file.click();
      },
      show_music: function () {
        this.$emit("music_show")
      },
      show_max: function (img) {
        //图片全屏
        //this.$emit("img_max_show", img);
        //this.$refs.show_max_img.src = img
        this.$store.commit("set_ad_img_list", this.img_list);
        this.$store.dispatch("thom_redirect",
          { name: "/scroll_full", router: this.$router });
      },
      //文字确认按钮
      certain_btn_w: function () {
        let x = 0
        let title = this.$refs.title.value;
        this.wenpng_click_d = false;
        this.w_value = '<div style="margin-top:3vw"></div>' + title + '</br>' +"<div style='margin-bottom:3vw'></div>" +this.$refs.wen_c.value ;
        if(!this._has_w){
          this._has_w = true;
          this.img_list.push({ w: true, tips: false,w_value: w_value})
        };//swiper 添加 文字
        if (!this._has_img) {
          this._has_img = true;
          this.img_list.push({ tips: true, w: false });
        }//swiper 添加 tips

        let Len = this.img_list.length;

        for (; x < Len; x++) {
          if (this.img_list[x].tips == true) {
            this.swiper_tips_index  = x
          }
        }
        this.swipe_show = true;
        this.img_tips = false
      }
    },
    components: {

    },
    mounted: function () {
      Indicator.close();
      this.$nextTick(() => {
        //图片添加
        let _this = this; // 下面的 this 是 input 指向input的
        this.$refs.file.addEventListener("change", (e)=> {
          //promise s
          let count = 0;
          let result = e.srcElement.files;
          let promise = new Promise((resolve, reject) => {
            let Len = e.srcElement.files.length,
                tips_index = _this.swiper_tips_index
            if (e.srcElement.files.length > 6) {
              Toast({
                message: '图像张数不能大于6张',
                position: 'bottom',
                duration: 2000
              });
              return;
            }

            this.e_files = e.srcElement.files

            for (let x = 0; x < Len; x++) {
             let  reader = new FileReader();
             reader.readAsDataURL(result[x]);
             let _e = e;

              //swiper_tips remove
             if (_this.swiper_tips_index != null) {
               _this.img_list.splice(tips_index, 1)
               _this.swiper_tips_index = null;
             }

             reader.onload = (e) => {
                this._has_img = true;
                this.img_list.push({ img: e.target.result, plus: false ,w:false,tips:false});
                  resolve("11");
                }
             }
          });

          promise.then((value) => {
            this.img_tips = false;
            // success
            _this.swipe_show = true;
          },(value)=>{
            // failure
          });
        })
      })
    },
    components: {

    }
  }
</script>
<style>
  /*Adventure_get_img s*/
  .adventure_get_img_tips{
    width: 100%;
    display: block;
  }
  /*Adventure_get_img e*/
  /*input new s*/
  .input_title::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #a05c2f;
    font-size: 3vw;
  }

  input_title:-moz-placeholder, textarea:-moz-placeholder {
    color: #a05c2f;
    font-size: 3vw;
  }

  .input_title {
    background-color: rgba(255,255,255,0.2);
    border: 0;
    text-align: center;
    outline: none;
    height: 7.4vw;
    border-bottom: 4px solid #ffffff;
    border-radius: 0;
    width: 98%;
    display: block;
  }

  .text_a_input {
    background-color: rgba(255,255,255,0.6);
    border: 0;
    text-align: center;
    outline: none;
    border-radius: 0;
    width: 98%;
    height: 66vw;
  }

  .input_s_btn {
    width: 24vw;
    bottom: 2vw;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }

  .new_input_w {
    width: 50vw;
    height: 77vw;
    position: absolute;
    top: 51vw;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(250,250,250,0.8);
  }
  /*input new e*/
  .Adventure_core {
    width: 83vw;
    /*height: 467px;*/
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    border: 2px solid #bd5b14;
    border-radius: 4vw;
    background-color: #fff;
  }
  /*Adventure_header s*/
  .Adventure_header {
    text-align: center;
    font-size: 4.2vw;
    height: 10vw;
    line-height: 10vw;
    color: #9f5c2f;
    font-weight: 600;
  }

  /*Adventure_header e*/
  /*Adventure_get_img e*/
  .Adventure_get_img {
    width: 70.6vw;
    height: 81vw;
    margin: 0 auto;
    border: 2px solid #bd5b14;
  }

  .Adventure_get_img_tips {
    width: 100%;
    max-height: 293px;
    display: block;
  }
  /*Adventure_get_img s*/
  /*Adventure_get_music s*/
  .Adventure_get_music {
    width: 70.6vw;
    border: 2px solid #ffffff;
    display: flex;
    margin: 6px auto 0;
  }

  .Adventure_music_line {
    width: 51vw;
    height: 1rem;
    line-height: 1rem;
    font-size: 14px;
    color: #a36439;
    border: 2px solid #bd5b14;
    margin-left: 3.3vw;
    margin-right: 1.2vw;
    border-radius: 3vw;
  }

  .wenpng {
    width: 6.4vw;
    display: block;
    height: 6.4vw;
  }

  .Adventure_music_btn {
    margin-top: 0.2rem;
    width: 8.9vw;
    display: block;
    max-height: 1.025rem;
  }

  .Adventure_bottom_header {
    width: 69vw;
    display: flex;
    justify-content: space-between;
  }

  .Adventure_bottom {
    display: flex;
    margin-top: 4px;
    height: 90px;
    border-top: 2px solid #bd5b14;
  }

  .Adventure_bottom_header_s {
    font-size: 12px;
    color: #a36439;
    font-weight: 600;
    line-height: 1;
    margin-top: 0.4rem;
    margin-left: 2vw;
  }

  .Adventure_bottom_header_btn {
    border: 2px solid #9f5c2f;
    margin-top: 0.2rem;
    font-size: 12px;
    padding: 2px;
    color: #a36439;
    height: 0.9rem;
    line-height: 0.9rem;
    border-radius: 1vw;
    padding-right: 1vw;
    padding-left: 1vw;
  }

  .certain_btn {
    border-radius: 1vw;
    margin-top: 1.45rem;
    margin-left: 2vw;
    width: 7vw;
    height: 2.65rem;
    color: #ffffff;
    line-height: 1.2;
    padding-top: 0.5rem;
    font-size: 1rem;
    background: #a36439;
  }

  .Adventure_left {
  }

  .text_area {
    width: 100%;
    resize: none;
    height: 3.5rem;
    border-radius: 0 0 0 4vw;
    border: 0;
  }

  /*Adventure_get_music e*/
/*input_title s*/
  .input_title {
    border: 0;
    text-align: center;
    width: 24vw;
    height: 10vw;
    line-height: 10vw;
    margin: 0 auto;
    font-size: 4.2vw;
    font-weight: 600;
    color:#a36439;
  }
/*input_title e*/
  .swiper_w{
    width:100%;
    height:100%;
    text-align:center;
    font-size:1rem;
    color:#000;
    overflow-y:scroll;
  }
  /*remove_img s*/
  .remove_img {
    position: absolute;
    left: 4vw;
    top: 2rem;
    width:8vw;
    height:8vw;
    line-height:7vw;
    font-size: 7vw;
    color: #fff;
    background-color: #ff2d4b;
    border-radius:50%;
    box-shadow:0 0 8px 2px #808080;
  }
  /*remove_img e*/
  /*add img */
  .add_img {
    position: absolute;
    right: 4vw;
    top: 2rem;
    width: 8vw;
    height: 8vw;
    line-height: 7.5vw;
    font-size: 7vw;
    color: #fff;
    background-color: forestgreen;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px #808080;
  }
/*add img */
  /*certain_w s*/
  .certain_w{
    position:absolute;
    bottom:10%;
    border-radius:2vw;
    padding:3vw 6vw 3vw 6vw;
    left:50%;
    transform:translate(-50%);
    letter-spacing:1vw;
    color:#fff;
    background-color:#ff2d4b;
  }
  /*certain_w e*/
  /*wenpng_click_mask s*/
  /*resize: none;*/
  .wenpng_click_mask {
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3vw;
  }
  .wenpng_click_mask textarea {
    resize: none;
    width:80%;
    height:60%;
    border-radius:3vw;
    outline:none;
    padding-left:4%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:1.2rem;
    color:#000;
    
    
  }
  /*wenpng_click_mask e*/
  /*show_max s*/
  .show_max {
    width: 100%;
    height: 100%;
    background-color: #000;
    left: 0;
    top: 0;
    position: absolute;
  }
  /*show_max e*/
  .adventure_get_img_tips {
    width: 100%;
    height: 100%;
  } 
  .mint-swipe-indicator.is-active {
    background: #803c0e;
  }

  .mint-swipe .mint-swipe-indicators .is-active {
    background: #a36439;
  }
  .mint-swipe-indicator.is-active {
    background: #a36439;
  }
  .mint-swipe-indicator.is-active {

  }
  .mint-swipe-indicator .is-active {
    background: #a36439;
  } 
  @component-namespace page {
    @component swipe {
      @descendent desc {
        text-align: center;
        color: #666;
        margin-bottom: 5px;
      }

      .mint-swipe {
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
      }

      .mint-swipe-item {
        line-height: 200px;
      }

      .slide1 {
        background-color: #0089dc;
        color: #fff;
      }

      .slide2 {
        background-color: #ffd705;
        color: #000;
      }

      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }
    }
  }
 
</style>
